import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal } from 'antd';
import React, { useState, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import ProTable from '@ant-design/pro-table';
import styles from './index.less';

import {
  listUnderchargeLuggageHistory
} from '../service.js';
import {
  Const
} from '../Const';

const Detail = props => {

  const { modalVisible, onCancel, detailTitle, detailType, searchData } = props;

  const columns = [
    {
      title: '事故单编号',
      dataIndex: 'accidentId',
      hideInSearch: true,
      width: 200
    },
    {
      title: '舱位',
      dataIndex: 'cabin',
      hideInSearch: true,
      width: 100
    },
    {
      title: '行李号',
      dataIndex: 'pkgNo',
      hideInSearch: true,
      width: 100
    },
    {
      title: '旅客姓名',
      dataIndex: 'paxName',
      hideInSearch: true,
      width: 100
    },
    {
      title: '证件类型',
      dataIndex: 'idType',
      hideInSearch: true,
      width: 100,
      render: (val) => <span>{Const.idTypeMap[val]?.text || '-'}</span>
    },
    {
      title: '证件号',
      dataIndex: 'idNo',
      hideInSearch: true,
      width: 100
    },
    {
      title: '航班日期',
      dataIndex: 'flightDate',
      hideInSearch: true,
      width: 100
    },
    {
      title: '航班号',
      dataIndex: 'flightNo',
      hideInSearch: true,
      width: 100
    },
    {
      title: '事故原因',
      dataIndex: 'accidentReason',
      valueEnum: Const.accidentReasonMap,
      filters: false,
      hideInSearch: true,
      width: 100
    },
    {
      title: '临时赔偿',
      dataIndex: 'tempPayment',
      hideInSearch: true,
      width: 100
    },
    {
      title: '结案赔偿',
      dataIndex: 'closePayment',
      hideInSearch: true,
      width: 100
    },
    {
      title: '事故单状态',
      dataIndex: 'accidentStatus',
      hideInSearch: true,
      width: 120,
      render: (val) => <span>{Const.accidentStatusMap[val]?.text || '-'}</span>
    },
    {
      title: '客票号',
      dataIndex: 'tktNo',
      hideInSearch: true,
      width: 100
    },
    {
      title: '旅客航程',
      dataIndex: 'segment',
      hideInSearch: true,
      width: 100
    },
    {
      title: '录入人',
      dataIndex: 'createUser',
      hideInSearch: true,
      width: 100
    },
    {
      title: '备注',
      dataIndex: 'remark',
      width: 100,
      hideInSearch: true,
    },
  ];

  return (
    <Modal
      destroyOnClose
      title={`${detailTitle}历史事故单`}
      visible={modalVisible}
      onCancel={onCancel}
      onOk={onCancel}
      width={800}
    >
      <ProTable
        className={styles.compactTable}
        style={{ marginTop: '20px' }}
        rowKey="accidentId"
        toolBarRender={false}
        headerTitle={false}
        request={params => {
          let obj = {
            ...searchData,
            accidentType: detailType
          };
          obj.pageSize = params.pageSize;
          obj.current = params.current;
          return listUnderchargeLuggageHistory(obj);
        }}
        tableAlertRender={false}
        columns={columns}
        options={false}
        search={false}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total, range) => `第${range[0]}-${range[1]}条 共 ${total} 项`,
        }}
        scroll={{ x: 800, y: 300 }}
      >
      </ProTable>
    </Modal>
  )
};

export default Detail;
